<template>
    <div id="LibraryList">
        <div class="list-content">
            <div class="condition">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <div class="condition-item">
                            <span>专业:</span>
                            <el-input class="w300" v-model="form.name" placeholder="请输入"></el-input>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="condition-item">
                            <span>类型:</span>
                            <el-input class="w300" v-model="form.name" placeholder="请输入"></el-input>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="condition-item">
                            <span>收费:</span>
                            <el-input class="w300" v-model="form.name" placeholder="请输入"></el-input>
                        </div>
                    </el-col>
                </el-row>
                <div class="condition-item" style="width: 100%; justify-content: center">
                    <el-button type="primary" size="small">重置</el-button>
                    <el-button type="success" size="small">查询</el-button>
                </div>
            </div>
            <div class="table-list">
                <div class="table-top">
                    <div>
                        <span style="color: #5e6d82">共计 0 条</span>
                    </div>
                    <div>
                        <el-button type="primary" size="small" @click="addCreate">新建</el-button>
                    </div>
                </div>
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column label="序号" type="index" width="50" align="center">
                    </el-table-column>
                    <el-table-column prop="date" label="发布日期" width="180">
                    </el-table-column>
                    <el-table-column prop="name" label="文档名称" width="180">
                    </el-table-column>
                    <el-table-column prop="address" label="作者">
                    </el-table-column>
                    <el-table-column prop="address" label="专业">
                    </el-table-column>
                    <el-table-column prop="address" label="类型">
                    </el-table-column>
                    <el-table-column prop="address" label="标签">
                    </el-table-column>
                    <el-table-column prop="address" label="收费">
                    </el-table-column>
                    <el-table-column prop="address" label="操作" align="center" width="200px">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" style="font-size: 14px;" @click="toDetail">查看
                            </el-button>
                            <el-button type="text" size="small" style="font-size: 14px;" @click="edit">编辑</el-button>
                            <el-dropdown trigger="click" @command="handleCommand">
                                <span class="el-dropdown-link" style="color: #409EFF; cursor: pointer;">
                                    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command="del">删除</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="form.pn" :page-sizes="[100, 200, 300, 400]" :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper" :total="400">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'LibraryList',
    data() {
        return {
            form: {
                name: '',
                pn: 1
            },
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }]
        };
    },
    methods: {
        handleSizeChange() { },
        handleCurrentChange() { },
        handleCommand(command) {
            if(command == 'del') {
                this.toDel()
            }
        },
        addCreate() {
            this.$router.push({
                path: '/library/create',
            })
        },
        edit() {
            this.$router.push({
                path: '/library/create',
            })
        },
        toDetail() {
            this.$router.push({
                path: '/library/detail',
            })
        },
        toDel() {
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    },
};
</script>

<style lang="scss" scoped>
#LibraryList {
    box-sizing: border-box;
    width: 100%;
    height: calc(100vh - 84px);
    padding: 20px;
    background: #f4f4f4;

    .list-content {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        overflow-y: scroll;
    }

    .el-row {
        margin: 0 !important;
    }

    .condition {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100%;
        padding: 20px 0 0 20px;
        // padding-right: 70px;
        border-radius: 8px;
        background: #fff;
    }

    .condition-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        span {
            box-sizing: border-box;
            width: 120px;
            text-align: right;
            padding-right: 20px;
            color: #5e6d82;
        }
    }

    .table-list {
        width: 100%;
        padding: 20px;
        border-radius: 8px;
        margin-top: 20px;
        background: #fff;
    }

    .table-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    .pagination {
        margin-top: 20px;
        text-align: center;
    }
}
</style>